<template>
<div style="height:100%">
  <div style="height:61px">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-submenu :index="i.path" v-for="i in data" :key="i.path">
        <template slot="title">{{i.meta.title}}</template>
        <el-menu-item  :index="k.path" v-for="k in i.children" :key="k.path">
            <template slot="title">{{k.meta.title}}</template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
  <div style="height:calc(100% - 61px)">
    <router-view>
      <router-view></router-view>
    </router-view>
  </div>
</div>
</template>

<script>
import route from '../../router'
export default {
  name:'home',
  data(){
    return {
      data:[],
      activeIndex: '1',
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      this.$router.replace(key)
    }
  },
  mounted(){
    this.data = route.options.routes[0].children
  },
}

</script>